<template>
  <div class="search-banner">
    <h1><span>Search </span>Results</h1>
    <search class="search"></search>
  </div>
</template>

<script>
import Search from '@/components/Search/SimSearchBox';

export default {
  name: "SearchBanner",

  props: {

  },
  data() {
    return {

    };
  },
  computed: {

  },
  created() {

  },
  mounted() {

  },
  watch: {

  },
  methods: {

  },
  components: {
    Search
  },
};
</script>

<style scoped lang="scss">
  .search-banner {
    height: 175px;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    display: flex;
    justify-content: space-around;
    align-items: center;

    @keyframes gradient {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    h1 {
      font-weight: 600;
      color: #fff;
      font-size: 3.5rem;
      transition: opacity ease-in-out .25s, font-size ease-in-out .25s;

      span {
        font-weight: 600;
        color: #fff;
        transition: opacity ease-in-out .25s, font-size ease-in-out .25s;
        @media screen and (max-width: 1100px){
          opacity: 0.01;
          font-size: 1px;
        }
        @media screen and (max-width: 1024px){
          display: none;
        }
      }

      @media screen and (max-width: 720px){
        opacity: 0;
        font-size: 0;
      }
      @media screen and (max-width: 600px){
        display: none;
      }
    }

    .search {
      transition: width ease-in-out .25s;
      @media screen and (max-width: 600px){
        width: 86vw;
      }
    }
  }
</style>
